<template>
	<view class="setUp">
		<view class="user_info">
			<view class="">
				<view class="info_name">头像</view>
				<view class="info_val" @click="upload">
					<image :src="avatar" mode="aspectFill" v-if="avatar"></image>
					<image src="/static/mine/shangchuan2.png" mode="" v-else></image>
				</view>
			</view>
			<view class="">
				<view class="info_name">昵称</view>
				<view class="info_val">
					<input v-if="isLogin" type="text" class="t-r" v-model="nickname" @confirm="changeUserInfo">
					<text v-else @click="$to('/pages/login')">未登录</text>
					<uni-icons type="right" color="#B3B3B3" size="14"></uni-icons>
				</view>
			</view>
			<view class="">
				<view class="info_name">电话</view>
				<view class="info_val">
					<text v-if="isLogin">{{ phone?phone:'暂未授权手机号' }}</text>
					<text v-else @click="$to('/pages/login')">未登录</text>
					<uni-icons type="right" color="#B3B3B3" size="14"></uni-icons>
				</view>
			</view>
		</view>
		<view class="btn" @click="logout" v-if="isLogin">退出登录</view>
	</view>
</template>

<script>
	import baseUrl from "../../../libs/config.js"
	export default {
		data() {
			return {
				editTitle: '',
				avatar: '',
				nickname: '',
				phone: '',
				currentVal: '',
				userInfo: null,
				BASE_URL: baseUrl.baseUrl,
				isLogin: false,
			};
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			upload() {
				if(!uni.getStorageSync('token')) {
					uni.showModal({
						title: '提示',
						content: '当前功能需登录后体验，请先登录',
						// showCancel: false,
						success: (t) => {
							if(t.confirm) {
								uni.navigateTo({
									url: '/pages/login'
								})
							}
						}
					})
					return;
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					success: (res) => {
						this.upImg(res.tempFilePaths[0])
					}
				});
			},
			upImg(path) {
				uni.showLoading({
					title: '上传中...'
				})
				uni.uploadFile({
					url: `${this.BASE_URL}api/front/upload/image?pid=7&model=user`,
					filePath: path,
					name: 'multipart',
					header: {
						'Authori-zation': uni.getStorageSync('token'),
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						// console.log(res, "res----")
						uni.hideLoading()
						const resData = JSON.parse(res.data)
						if (resData.code == 200) {
							this.avatar = resData.data.url;
							this.changeUserInfo();
						} else {
							this.showToast(resData.message)
						}
			
					}
				});
			},
			logout() {
				if(!uni.getStorageSync('token')) return
				uni.showModal({
					title: '温馨提示',
					content: '退出当前账号？',
					success: (e) => {
						if(e.confirm) {
							uni.removeStorageSync('token');
							this.isLogin = false;
							setTimeout(v=> {
								uni.setStorageSync('isRegister',1)
							},500)
							uni.navigateBack();
						}
					}
				})
			},
			async getUserInfo() {
				let res = await this.$api.get('user');
				if (res.code == 200) {
					this.userInfo = res.data;
					this.avatar = res.data.avatar;
					this.nickname = res.data.nickname;
					this.phone = res.data.phone;
					this.isLogin = true;
				}
			},
			async changeUserInfo() {
				const res = await this.$api.post('user/edit', {
					avatar: this.avatar,
					nickname: this.nickname,
				});
				if(res.code == 200) {
					console.log('修改成功')
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.setUp {
		padding: 30rpx 26rpx;
		box-sizing: border-box;

		.user_info {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 20rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 120rpx;

			>view {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.info_name {
					font-size: 30rpx;
					font-weight: 500;
				}

				.info_val {
					display: flex;
					align-items: center;
					color: #B3B3B3;
					font-size: 30rpx;
					
					.t-r {
						text-align: right;
					}

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 30rpx;
					}
				}
			}

			>view:not(:last-child) {
				margin-bottom: 62rpx;
			}
		}

		.btn {
			width: 100%;
			height: 94rpx;
			background-color: #2E80FE;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 14rpx;
			text-align: center;
			line-height: 94rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
		}
	}
</style>